<template>
  <div class="page_padding">
    <!--  :gobackShow="false" -->
    <MyNavBar :title="title" @goback="goback" />
    <!-- 签到码 -->
    <div class="signCode">
      <div class="title">民主测评会签到二维码</div>
      <div class="desc method">参会人使用微信扫码签到。</div>
      <div class="desc">签到时间：{{ detailsData.startTime }} ~ {{ detailsData.endTime }}</div>
      <div class="code">
        <div class="qrcode" ref="qrCodeUrl"></div>
        <!-- <div class="place"></div> -->
      </div>
    </div>
    <!-- 签到码 -->
  </div>
</template>

<script>
import { getSignUrl, getAssessmentDetail } from '@api/api-democratic.js'
import QRCode from 'qrcodejs2'

import MyNavBar from '@com/MyNavBar'
export default {
  name: 'signCode',
  components: { MyNavBar },
  props: {},
  data() {
    return {
      title: '签到码',
      id: this.$route.query.id,
      timer: null,
      detailsData: {},
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initdata()
    this.getSignUrl()
    this.timer = setInterval(() => {
      this.getSignUrl()
    }, 4000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    /* 初始化数据 */
    initdata() {
      getAssessmentDetail({ id: this.id }).then(res => {
        let data = res.data
        this.detailsData = { ...data }
      })
    },
    // 生成动态签到码
    getSignUrl() {
      getSignUrl({
        id: this.id,
        signUrl: config.signUrl,
        voteUrl: config.voteUrl,
        signErrorUrl: config.signErrorUrl,
      }).then(res => {
        let data = res.data
        this.$refs.qrCodeUrl.innerHTML = ''
        this.creatQrCode(data)
      })
    },
    // 生成二维码
    creatQrCode(data) {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: `${config.ip}/topnet-assess${data}`, // 需要转换为二维码的内容
        width: 160,
        height: 160,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
      qrcode._el.title = ''
    },
    goback() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
.signCode {
  text-align: center;
  padding: 0 16px;
  // font-size: 14px;
  .title {
    font-size: 16px;
    color: #333333;
    margin-top: 50px;
  }
  .desc {
    margin-top: 5px;
  }
  .method {
    margin-top: 15px;
  }
  .code {
    margin-top: 60px;
    .place {
      width: 150px;
      height: 150px;
      border: 1px solid #333333;
      margin: auto;
    }
    .qrcode {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
